<template>
  <div class="top-section">
    <div class="header-wrapper">
      <div class="header-title">
        您正在查看【<span class="title-span"
          >{{ title }}- <span :class="{ colorDefault: currentAcc !== 'month' }">当月</span><span class="colorDefault">/</span
          ><span :class="{ colorDefault: currentAcc === 'month' }">年累计</span></span
        >】页面：
      </div>
      <div class="form-wrapper">
        <div class="form-content">
          <div v-if="isAcc" class="acc-selector">
            <img
              :src="monthSvg"
              alt="month"
              class="button-icon"
              :title="'看当月'"
              :class="{ active: currentAcc === 'month' }"
              @click="handleAccChange('month')"
            />
            <img
              :src="yearSvg"
              alt="year"
              class="button-icon"
              :title="'看当年'"
              :class="{ active: currentAcc === 'year' }"
              @click="handleAccChange('year')"
            />
          </div>
          <a-select
            class="select-title select-title-space"
            :allowClear="false"
            v-model:value="currentHotelCode"
            :options="hotelList"
            :showSearch="true"
            :filterOption="filterOption"
            @change="handleHotelChange"
          />
          <a-select
            v-if="isRestType"
            class="select-title select-title-space"
            :allowClear="false"
            v-model:value="restType"
            :options="typeList"
            @change="handleRestTypeChange"
          />
          <a-date-picker
            class="select-title-space"
            :allowClear="false"
            v-model:value="modelValue"
            picker="month"
            placeholder="选择月份"
            format="YYYY年M月"
            valueFormat="YYYYMM"
            :disabledDate="isMonthDisabled"
            @change="handleDateChange"
          />
          <a-radio-group v-if="isShowPre" v-model:value="modelPre" @change="handlePreChange">
            <a-radio :value="1">M+1预测</a-radio>
            <a-radio :value="2">M+2预测</a-radio>
          </a-radio-group>
          <a-switch
            v-model:checked="currentState"
            checked-children="查看当月"
            un-checked-children="查看年累计"
            :class="customSwitchClass"
            size="large"
            @change="handleSwitchChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, watch, defineProps, defineEmits } from 'vue';
  import dayjs from 'dayjs';
  import monthSvg from '/@/assets/svg/month-svg.svg';
  import yearSvg from '/@/assets/svg/year-svg.svg';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    hotelList: {
      type: Array,
      default: () => [],
    },
    typeList: {
      type: Array,
      default: () => [],
    },
    currentHotel: {
      type: Object,
      default: () => ({}),
    },
    lastMonth: {
      type: String,
      default: '',
    },
    currentRestType: {
      type: String,
      default: '',
    },
    currentAcc: {
      type: String,
      default: 'month',
    },
    currentPre: {
      type: Number,
      default: 1,
    },
    isRestType: {
      type: Boolean,
      default: false,
    },
    isShowPre: {
      type: Boolean,
      default: false,
    },
    isAcc: {
      type: Boolean,
      default: true,
    },
  });

  const emit = defineEmits(['hotelChange', 'dateChange', 'accChange', 'preChange', 'update:lastMonth', 'typeChange']);

  const modelValue = ref(props.lastMonth);
  const modelPre = ref(props.currentPre);
  const restType = ref(props.currentRestType);
  const currentState = ref(props.currentAcc === 'month');
  const customSwitchClass = ref('custom-switch');

  const currentHotelCode = ref(props.currentHotel.code);

  watch(
    () => props.currentHotel.code,
    (newVal) => {
      currentHotelCode.value = newVal;
    }
  );

  watch(
    () => props.lastMonth,
    (newVal) => {
      modelValue.value = newVal;
    }
  );

  watch(
    () => props.currentPre,
    (newVal) => {
      modelPre.value = newVal;
    }
  );

  watch(
    () => props.currentRestType,
    (newVal) => {
      restType.value = newVal;
    }
  );

  watch(
    () => props.currentAcc,
    (newVal) => {
      currentState.value = newVal === 'month';
    }
  );

  const isMonthDisabled = (current) => {
    const lastMonth = dayjs().subtract(1, 'month');
    return current.isAfter(lastMonth);
  };

  const handlePreChange = () => {
    emit('preChange', modelPre.value);
  };

  const filterOption = (input, option) => {
    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };

  const handleHotelChange = (value) => {
    emit('hotelChange', value);
  };

  const handleRestTypeChange = (value) => {
    emit('typeChange', value);
  };

  const handleDateChange = (value) => {
    emit('update:lastMonth', value);
    emit('dateChange', value);
  };

  const handleAccChange = (value) => {
    emit('accChange', value);
  };

  const handleSwitchChange = (checked) => {
    emit('accChange', checked ? 'month' : 'year');
  };
</script>

<style lang="less" scoped>
  .top-section {
    background: #fff;
    padding: 5px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
  }

  .header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-title {
      font-size: 16px;
      font-weight: 600;
      color: #1a253b;
      margin: 0;
      padding: 0;
    }
    .title-span {
      padding: 0 10px;
    }
  }

  .form-wrapper {
    .form-content {
      display: flex;
      align-items: center;
      gap: 20px;
    }
  }

  .select-title-space {
    width: 200px;
  }

  .acc-selector {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .acc-button {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .date-icon {
    width: 16px;
    height: 16px;
  }

  .button-icon {
    width: 14px;
    height: 14px;
    cursor: pointer;
    transition: all 0.3s;
    filter: grayscale(100%);

    &.active {
      filter: none;
      transform: scale(1.5);
    }
  }
  .colorDefault {
    color: #cecece;
  }

  :deep(.custom-switch) {
    &.ant-switch-checked {
      background-color: #53498e !important;
    }

    &.ant-switch {
      background-color: #7d70a6;
    }
  }
</style>
